<template>
  <!-- <div class="nav-frame"> -->
  <div class="nav-frame" @mouseenter="show" @mouseleave="hide">
    <div ref="navFrame" class="menu-frame">
      <Icon
        v-for="(item, index) in data"
        :key="index"
        :data="item"
        :title="item.info ? item.name : item.name"
        :style="{ order: item.info.order, 'background-size': '125% auto' }"
        :class="[
          'nav-item',
          item.uid === currentParentUid ||
          item.children.find((item) => item.uid === currentParentUid)
            ? 'chosen'
            : '',
        ]"
        @click.native.stop="mainclick(item, index, $event)"
      />
      <div
        v-if="selectedIndex !== -1"
        class="nav-expanded"
        :style="expandedStyle"
      >
        <NavigationTree
          v-for="(item, index) in expandedData"
          :key="index"
          :data="item"
          :icon-show="false"
          @click="click($event)"
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Navigation",
  components: {
    Icon: () => import("@components/Icon.vue"),
    NavigationTree: () => import("@components/NavigationTree.vue"),
  },
  props: {
    data: {
      type: Array,
      default: () => [],
    },
    flag: {
      type: Boolean,
      default: () => false,
    },
    iconShow: {
      type: Boolean,
      default: () => true,
    },
    titleShow: {
      type: Boolean,
      default: () => true,
    },
  },
  data() {
    return {
      // menuShow: false,
      expandedData: [],
      selectedIndex: -1,
      expandedStyle: {},
      currentParentUid: "",
    };
  },
  // computed: {
  //   isCurrentUid () {
  //   }
  // },
  created() {
    // this.handdleMsg();
  },
  methods: {
    // menuclick() {
    //   if (this.menuShow) {
    //     this.menuShow = false
    //   } else {
    //     this.menuShow = true
    //   }
    // },
    // handdleMsg(msg) {
    //   let that = this;
    //   // console.log(that.$global.ws, "999999999999");
    //   if (that.$global.ws && that.$global.ws.readyState == 1) {
    //     console.log("发送信息", msg);
    //     that.$global.ws.send(msg);
    //   }
    //   that.$global.ws.onmessage = function(res) {
    //     // console.log(res.data,'测试数据')

    //     var msgObj = JSON.parse(res.data)
    //     console.log("收到服务器内容", msgObj.msg);

    //     if (msgObj.msg.indexOf("冰水系统") != -1) {
    //       that.reciveVoice = {
    //         path: "IceSystem",
    //         title: "冰水系统概览",
    //         isLink: false
    //       };
    //     } else if (msgObj.msg.indexOf("电力系统") != -1) {
    //       that.reciveVoice = {
    //         path: "PowerAndLoad",
    //         title: "电力系统概览",
    //         isLink: false
    //       };
    //     } else if (msgObj.msg.indexOf("空压机系统") != -1) {
    //       that.reciveVoice = {
    //         path: "CDAsystem",
    //         title: "空气压缩机系统概览",
    //         isLink: false
    //       };
    //     } else if (msgObj.msg.indexOf("水平衡情况") != -1) {
    //       that.reciveVoice = {
    //         info: {
    //           outLinkBaseUrl: "http://192.168.65.15:8000/",
    //           linkUrl: "SR-03-04 水平衡.html"
    //         },
    //         isLink: true
    //       };
    //     } else if (msgObj.msg.indexOf("废水系统") != -1) {
    //       that.reciveVoice = {
    //         info: {
    //           outLinkBaseUrl: "http://192.168.65.15:8000/",
    //           linkUrl: "SR-02-07 废水系统.html"
    //         },
    //         isLink: true
    //       };
    //     } else if (msgObj.msg.indexOf("新风系统") != -1) {
    //       that.reciveVoice = {
    //         path: "MAUEquipmentComparison",
    //         title: "新风系统",
    //         isLink: false
    //       };
    //     } else if (msgObj.msg.indexOf("工厂") != -1) {
    //       that.reciveVoice = {
    //         path: "PowerAndLoad",
    //         title: "工厂用能",
    //         isLink: false
    //       };
    //     } else if (msgObj.msg.indexOf("首页") != -1) {
    //       that.reciveVoice = {
    //         path: "LargeScreen",
    //         title: "智能化大屏",
    //         isLink: false
    //       };
    //     }
    //   };
    // },
    show() {
      this.$refs.navFrame.style.display = "flex";
    },
    hide() {
      this.$refs.navFrame.style.display = "none";
    },
    mainclick(data, index, event) {
      // console.log(this.expandedData, "一级菜单");
      if (this.expandedData === data.children) {
        this.expandedData = [];
        return;
      }
      this.expandedData = [];
      this.selectedIndex = index;
      // console.log('一级菜单uid', data.uid)
      if (data && data.children[0]) {
        // console.log('naviclicktrue', data, event)
        this.expandedData = data.children;
        // console.log(this.expandedData, "456");
        if (event) {
          this.expandedStyle = {
            left: event.clientX - event.offsetX + "px",
            bottom: window.innerHeight - event.clientY + event.offsetY + "px",
          };
        }
        // this.$emit("click", data, index, event);
      } else {
        return;
      }
      // }
    },

    click(data, index, event) {
      //  console.log(this.expandedData, "一级菜单");
      this.expandedData = [];
      this.currentParentUid = data.parent_uid;
      this.selectedIndex = index;
      if (data && data.children) {
        this.expandedData = data.children;
        if (event) {
          this.expandedStyle = {
            left: event.clientX - event.offsetX + "px",
            bottom: window.innerHeight - event.clientY + event.offsetY + "px",
          };
        }
      }
      this.$emit("click", data, index, event);
      // }
    },
  },
};
</script>
<style lang='scss' scoped>
.nav-frame:hover {
  //  background-color: yellowgreen;
}
// .nav-frame:hover .menu-frame{
//   display: flex!important;
// }
.nav-frame .menu-hide {
  // display: none;
}
.menu-frame {
  display: flex;
  display: none;
  justify-content: space-between;
  width: 55%;
  height: 5rem;
  margin: 0 17.2% 0 22.8%;
  padding: 0 3.5%;
  // background: rgba(6, 90, 178, 0.4);
  // background-image: url("~@assets/image/frame_cockpit/background_cockpit_nav.png");
  background-image: url("~@assets/image/frame_cockpit/nav.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
}
.nav-item {
  flex-grow: 1;
  margin: 0.5rem 0;
}
.nav-item:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
  // color: #065ab2;
}
.chosen {
  background-color: rgba(255, 255, 255, 0.1) !important;
  // color: #065ab2;
}
.nav-expanded {
  display: flex;
  flex-direction: column;
  position: fixed;
  font-size: 1.3rem;
  background-color: rgba($color: #065ab2, $alpha: 0.9);
}
</style>
